
import { useTranslation } from 'react-i18next'
import { Link, useNavigate } from "react-router-dom";
import HeaderTitle from "../login/header";
import style from "./index.module.less"
import React, { Fragment, useState ,useEffect} from 'react'
import { Input, QRCode, Space, message, Select } from 'antd';

import { drawing ,getBankApi, getbanks,getinfo,fund_transfer} from "@/apis/user.js"
import {Toast } from 'antd-mobile'

import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons"

const Invite = (props) => {
	const navigate = useNavigate()
	let [active,setActive]=useState(1);
	const [num,setNum]=useState('');
	const [data,setData]=useState({});
	const [user,setUser]=useState({});
	const [banklist,setBanklist]=useState([]);
	const [tixianpsd,settixianpsd] = useState('');
	const [visible, setVisible] = useState(false)
	
	const changeTab=(current)=>{
		console.log('current:', current);
		setActive(current) //更新 active 状态
	}
	const drawings = () => {
		if(active == 1){
			if(data.zhuanshukuai_name == ''){
				Toast.show({
					icon: 'fail',
					content:  t('withdraw.title1'),
				})
				setTimeout(function(){
					window.history.back()
				},1500)
				return false
			}
		}
		if(active == 2){
			if(data.yinhangka_name == ''){
				Toast.show({
					icon: 'fail',
					content: t('withdraw.title2'),
				})
				setTimeout(function(){
					window.history.back()
				},1500)
				return false
			}
		}
		if(active == 3){
			if(data.USDTTRC20_name == ''){
				Toast.show({
					icon: 'fail',
					content: t('withdraw.title3'),
				})
				setTimeout(function(){
					window.history.back()
				},1500)
				return false
			}
		}
		if(active == 4){
			if(data.USDTERC20_name == ''){
				Toast.show({
					icon: 'fail',
					content: t('withdraw.title4'),
				})
				setTimeout(function(){
					window.history.back()
				},1500)
				return false
			}
		}
		let type = 1
		if(active == 1){
			type = 1
		}else if(active == 2){
			type = 2
		}else{
			type = 4
		}
		drawing({
			bank_name:type,
			money:num,
			qk_pwd:tixianpsd
		}).then(res => {
			if (res.status.errorCode == 0) {
				Toast.show({
					icon: 'success',
					content: res.status.msg,
				})
			} else {
				Toast.show({
					icon: 'fail',
					content: res.status.msg,
				})
			}
		})
	}
	useEffect(()=>{
		setTimeout(()=>{
			if (window.scrollTo) {
				window.scrollTo(0, 0);
			} else if (document.body.scrollTop) {
				document.body.scrollTop = 0;
			} else {
				document.documentElement.scrollTop = 0;
			}
			document.getElementById('root').scrollIntoView(true);
			document.getElementById('body').scrollIntoView(true);
		},0)
		if(!localStorage.getItem('login') || localStorage.getItem('login') == null || localStorage.getItem('login') == undefined || localStorage.getItem('login') == ''){
			navigate('/login')
			message.error(t('login.title52'))
			return
		}
		getData()
		getbank()
		huizhuan()
	},[])
	const huizhuan = () => {
		Toast.show({
			icon: 'loading',
			content: t('login.title53'),//'加载中'
		})
		fund_transfer().then(res=>{
			console.log(res)
			if(res.status.errorCode == 1){
				getinfo().then(res => {
					if (res.status.errorCode == 0) {
						message.success(res.status.msg)
						setNum(0)
						setUser(res.data.member)
					}
				})
			}else{
				message.info(res.status.msg)
			}
		})
	}
	const handleChange = (value) => {
		console.log(value)
	}
	const getbank = () =>{
		getbanks().then(res => {
			if (res.status.errorCode == 0) {
				res.data.map((item) => {
					item.value = item.bank_code
				})
				setBanklist(res.data)
			} else {
				Toast.show({
					icon: 'fail',
					content: res.status.msg,
				})
			}
		})
	}
	const getData =()=>{
		getBankApi().then(res => {
			if (res.status.errorCode == 0) {
				console.log(res.data.zhuanshukuai_name != '')
				if(res.data.zhuanshukuai_name != null && res.data.zhuanshukuai_name != ''){
					setActive(1)
				}else{
					setActive(2)
				}
				// if(res.data.yinhangka_name != null  && res.data.yinhangka_name != ''){
					
				// }
				if(!res.data.zhuanshukuai_name  && !res.data.yinhangka_name ){
					Toast.show({
						icon: 'fail',
						content: '请先绑定银行卡',
					})
					setTimeout(()=>{
						navigate('/cardmanage')
					},1500)
					return
				}
				setData(res.data)
			} else {
				Toast.show({
					icon: 'fail',
					content: res.status.msg,
				})
			}
		})
	}
	const { t } = useTranslation();
	return (
		<React.Fragment>
			<HeaderTitle title={t('withdraw.title5')} right_title={t('agent.title2')}/>
			<div className={style['main']}>
				<div className={style['withdraw_group']}>
					<div className={style['withdrawBox']}>
						{
							active == 1 ? 						<div className={`${style['wbli']} ${active === 1 ? style['active'] : ''}`} onClick={()=>{changeTab(1)}}>
							<div className={style['btn']}>{t('withdraw.title6')}</div>
								</div> : 						<div className={`${style['wbli']} ${active === 2 ? style['active'] : ''}`} onClick={()=>{changeTab(2)}}>
							<div className={style['btn']}>{t('withdraw.title7')}</div>
						</div>
						}


						{/*<div className={`${style['wbli']} ${active === 3 ? style['active'] : ''}`} onClick={()=>{changeTab(3)}}>
							<div className={style['btn']}>{t('withdraw.title8')}</div>
						</div>
						<div className={`${style['wbli']} ${active === 4 ? style['active'] : ''}`} onClick={()=>{changeTab(4)}}>
							<div className={style['btn']}>{t('withdraw.title9')}</div>
						</div>*/}
					</div>
				</div>
				<div className={style['withDraw_info']}>
					{
						active == 1 ? (<ul>
							<li>
								<span className={style['left']}>{t('withdraw.title10')}</span>
								<span className={style['right']}>{data.real_name}</span>
							</li>
							<li>
								<span className={style['left']}>{t('withdraw.title11')}</span>
								<span className={style['right']}>{data.zhuanshukuai_username}</span>
							</li>
							<li>
								<span className={style['left']}>{t('withdraw.title21')}：</span>
								<span className={style['right']}>
									{user.money}
									<span className={style['newbtns']} onClick={()=>{setNum(user.money)}}>{t('withdraw.title22')}</span>
								</span>
							</li>
							{/*<li>
								<span className={style['left']}>提款密码:&nbsp;</span>
								<div className={style['shurukuangbox']}>
									<input className={style['right']} type={visible ? 'text' : 'password'} placeholder="请输入提款密码" onChange={(e)=>settixianpsd(e.target.value)}/>
									<div>
										{!visible ? (
											<EyeInvisibleOutline onClick={() => setVisible(true)} />
										) : (
											<EyeOutline onClick={() => setVisible(false)} />
										)}
									</div>
								</div>
							</li>*/}
							{/* <li>
								<span className={style['left']}>錢包餘額：</span>
								<span className={style['right']}>{data.money}元</span>
								<div className={style['btn']}>全部提款</div>
							</li>
							<li>
								<span className={style['left']}>轉數快所属银行：</span>
								<span className={style['right']}>{data.ml_money}</span>
							</li>
							<li>
								<span className={style['left']}>尚餘打碼量：</span>
								<span className={style['right']}>{data.ml_money}</span>
							</li>
							<li>
								<span className={style['left']}>可提款次數：</span>
								<span className={style['right']}>500</span>
							</li> */}
						</ul>) : ''
					}
					{
						active == 2 ? (<ul>
							<li>
								<span className={style['left']}>{t('withdraw.title10')}</span>
								<span className={style['right']}>{data.real_name}</span>
							</li>
							<li>
								<span className={style['left']}>{t('withdraw.title12')}</span>
								<span className={style['right']}>{data.yinhangka_bank}</span>
							</li>
							<li>
								<span className={style['left']}>{t('withdraw.title21')}：</span>
								<span className={style['right']}>
									{user.money}
									<span className={style['newbtns']} onClick={()=>{setNum(user.money)}}>{t('withdraw.title22')}</span>
								</span>
							</li>
							<li>
								<span className={style['left']}>{t('withdraw.title13')}</span>
								<Select
								  defaultValue={banklist[0]}
								  style={{ width: 120 }}
								  onChange={handleChange}
								  options={banklist}
								/>
								{/* <span className={style['right']}>{data.yinhangka_username}</span>*/}
							</li>
							{/* <li>
								<span className={style['left']}>提款密码:</span>
								<div className={style['shurukuangbox']}>
									<input className={style['right']} type={visible ? 'text' : 'password'} placeholder="请输入提款密码" onChange={(e)=>settixianpsd(e.target.value)}/>
									<div>
										{!visible ? (
											<EyeInvisibleOutline onClick={() => setVisible(true)} />
										) : (
											<EyeOutline onClick={() => setVisible(false)} />
										)}
									</div>
								</div>
							</li>*/}
							{/* <li>
								<span className={style['left']}>錢包餘額：</span>
								<span className={style['right']}>{data.money}元</span>
								<div className={style['btn']}>全部提款</div>
							</li>
							<li>
								<span className={style['left']}>尚餘打碼量：</span>
								<span className={style['right']}>{data.ml_money}</span>
							</li>
							{/* <li>
								<span className={style['left']}>可提款次數：</span>
								<span className={style['right']}>500</span>
							</li> */}
						</ul>) : ''
					}
					{
						active == 3 ? (<ul>
							<li>
								<span className={style['left']}>{t('withdraw.title10')}</span>
								<span className={style['right']}>{data.USDTTRC20_name}</span>
							</li>
							<li>
								<span className={style['left']}>{t('withdraw.title14')}</span>
								<span className={style['right']}>{data.USDTTRC20_username}</span>
							</li>
							<li>
								<span className={style['left']}>提款密码:</span>
								<div className={style['shurukuangbox']}>
									<input className={style['right']} type={visible ? 'text' : 'password'} placeholder="请输入提款密码" onChange={(e)=>settixianpsd(e.target.value)}/>
									<div>
										{!visible ? (
											<EyeInvisibleOutline onClick={() => setVisible(true)} />
										) : (
											<EyeOutline onClick={() => setVisible(false)} />
										)}
									</div>
								</div>
							</li>
						</ul>) : ''
					}
					{
						active == 4 ? (<ul>
							<li>
								<span className={style['left']}>{t('withdraw.title10')}</span>
								<span className={style['right']}>{data.USDTERC20_name}</span>
							</li>
							<li>
								<span className={style['left']}>{t('withdraw.title15')}</span>
								<span className={style['right']}>{data.USDTERC20_username}</span>
							</li>
							<li>
								<span className={style['left']}>提款密码:</span>
								<div className={style['shurukuangbox']}>
									<input className={style['right']} type={visible ? 'text' : 'password'} placeholder="请输入提款密码" onChange={(e)=>settixianpsd(e.target.value)}/>
									<div>
										{!visible ? (
											<EyeInvisibleOutline onClick={() => setVisible(true)} />
										) : (
											<EyeOutline onClick={() => setVisible(false)} />
										)}
									</div>
								</div>
							</li>
						</ul>) : ''
					}
				</div>
				<div className={style['forms']}>
					<div className={style['form-ul']}>
						<div className={style['fli']}>
							<label>{t('withdraw.title16')}</label>
							<Input defaultValue={num} value={num} onChange={(e)=> {setNum(e.target.value)}} />
						</div>
						<div className={style['fli']}>
							<label>{t('withdraw.title160')}</label>
							<span style={{fontSize:'14px'}}>{user.ml_money || ''}</span>
						</div>
					</div>
					<div className={style['operate']}>
						<div className={style['tip']}>
							{t('withdraw.title17')}
							<span className={style['rule']}>{t('withdraw.title18')}</span>
						</div>
						<div className={style['easterBtn']}>{t('withdraw.title19')}</div>
						<div className={style['submitBtn']} onClick={()=>{drawings()}}>{t('withdraw.title20')}</div>
					</div>
				</div>
			</div>
		</React.Fragment>
	)
}


export default Invite
